<template>
	<div class="update-pwd-page">
		<div class="profile-header">
			<van-nav-bar title="修改密码" left-arrow @click-left="$router.back()" />
		</div>
		
		<div class="form-container">
			<van-form @submit="onSubmit">
				<van-field label="编号" v-model="userForm.id" readonly> </van-field>
				<van-field label="用户" v-model="userForm.name" type="text" readonly />

				<van-field label="原来密码" v-model="userForm.password" type="password" placeholder="请输入原密码"
					:rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />

				<van-field label="新的密码" v-model="userForm.password2" type="password" placeholder="请输入新密码"
					:rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />

				<van-field label="确认密码" v-model="userForm.password22" type="password" placeholder="请再次输入新密码"
					:rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />

				<div style="margin: 16px;">
					<van-button round block type="primary" native-type="submit">提交</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
	import { showToast } from 'vant'
	import { updatePwdAPI } from "@/api/user.js";
	import { getUserLocal } from "@/utils/auth.js";
	export default {
		data() {
			return {
				userForm: {
					id: null,
					name: "",
					password: "",
					password2: "", //新的密码
					password22: "", //确认密码          
				},

				//规则:字母数字3~12位        
				regNamePwd: /^[a-z0-9]{3,12}$/i,
			};
		},
		mounted() {
			let user = getUserLocal();
			this.userForm.id = user.id;
			this.userForm.name = user.name;
		},

		methods: {
			//处理提交保存
			onSubmit() {
				if (this.userForm.password2 != this.userForm.password22) {
					showToast("确认密码两次输入不一致");
					return;
				}

				//注意传递过去的参数user的属性名
				let user = this.userForm;
				delete user.password22; //删除该临时的字段
				updatePwdAPI(user).then(() => {
					showToast("密码更改成功！");
					this.$router.push({
						name: "user"
					});
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	// 引入主题色变量，与其他页面保持一致
	@mainColor: #8b4513;      // 棕色主题色
	@bgColor: #f9f5ed;        // 米黄色背景
	@lightBrown: #f5e8d0;     // 浅棕色
	@darkBrown: #5a4a42;      // 深棕色

	.update-pwd-page {
		background-color: @bgColor;
		min-height: 100vh;
		padding-top: 46px;
	}

	// 头部导航样式
	.profile-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: @mainColor;

		/deep/ .van-nav-bar {
			background-color: @mainColor;

			.van-nav-bar__title {
				color: white;
			}
		}
	}

	// 表单容器样式
	.form-container {
		background-color: white;
		margin: 15px;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		margin-top: 20px;
	}

	// 字段样式调整
	/deep/ .van-field {
		margin-bottom: 15px;
		padding: 5px 0;
		border-bottom: 1px solid #f0e8d9;

		&:last-of-type {
			border-bottom: none;
		}

		.van-field__label {
			color: @darkBrown;
			font-weight: 500;
			width: 80px;
		}

		.van-field__control {
			color: #333;
		}

		// 输入框聚焦样式
		&.van-field--focused {
			.van-field__control {
				color: @mainColor;
			}
		}
	}

	// 按钮样式
	/deep/ .van-button--primary {
		background-color: @mainColor;
		border-color: @mainColor;
		height: 46px;
		font-size: 16px;

		&:active {
			background-color: darken(@mainColor, 10%);
			border-color: darken(@mainColor, 10%);
		}
	}

	// 错误提示样式
	/deep/ .van-field__error-message {
		color: #e53935;
		font-size: 12px;
	}
</style>